<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="../script/bootstrap-3.3.7.min.css">
    <link rel="stylesheet" href="../script/jquery-ui.1.10.4.css">  <!-- 注意顺序-->
    <style>
        .ju {
            margin-top: 10px;
        }

        .div1 {
            height: 100px;
            width: 100px;
            border: 1px solid ;

        }

        .div2 {
            height: 200px;
            width: 200px;
            border: 1px solid #cccccc;

        }
    </style>
    <script>
        function change(idname, color, width) { // todo 多个 style属性
            var odiv = document.getElementById(idname);
            if (odiv.className == "div1") {
                odiv.className = "div2"
//              方法一
//                odiv.style.cssText = "background:" + color + ";" + "width:" + width
                // 方法二
                odiv.style["background"] = color
                odiv.style["width"] = width
            } else {
                odiv.className = "div1"
                odiv.style.cssText = ""
            }

        }

        function showhide(obj) {
            var odiv = document.getElementById("div1")
            if (odiv.style.display == "none") {
                odiv.style.display = "block"
            } else {
                odiv.style.display = "none"
            }
        }
    </script>
</head>

<body>
<div class="container">

    <div class="row ju">

        <div id="div1" class="div1" onmouseover="change('div1','red','50px')"></div>
    </div>
    <div class="row ju">
        <div class="btn btn-success" onclick="showhide(this)">按钮</div>
    </div>
    <div class="row ju">
        <div id="div2" class="div1"></div>
        <div class="btn btn-danger" onclick="change('div2','yellow','50px')">按钮</div>
    </div>
</div>

</body>
</html>